<template>
	<view class="wrap">
	<view class="top">
	<view class="item">
		<u-icon name="/static/icon/add_name.png" size="38" color="#666666"></u-icon>
		<view class="left">收货人</view>
		<input type="text" placeholder-class="line" placeholder="请使用真实姓名" />
	</view>
	<view class="item">
		<u-icon name="/static/icon/add_phone.png" size="38" color="#666666"></u-icon>
		<view class="left">电话</view>
		<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
	</view>
	<view class="item" @tap="showRegionPicker">
		<u-icon  size="38" name="/static/icon/location.png"></u-icon>
		<view class="left">地区</view>
		<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" :value="location"/>
	</view>
	<view class="item address">
		<u-icon name="map" size="40" color="#838383"></u-icon>
		<view class="left">地址</view>
		<input placeholder-class="line" placeholder="街道、楼牌等" :v-model="address"/>
	</view>
	<!-- <view class="site-clipboard">
		<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
		<view class="clipboard">
			地址粘贴板
			<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
		</view>
	</view> -->
	
	</view>
		<view class="addSite" @tap="subMIt()">
			<view class="add">
				保存
			</view>
		</view>
		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="selctLocation"/>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			location:'',
			address:''
		};
	},
	methods: {
		
		showRegionPicker() {
			this.show = true;
		},
		selctLocation(value){
			var{province,city,area} = value
			var city = city.label=='市辖区' ? '':city.label
			this.location = `${province.label}${city}${area.label}`
		},
		subMIt(){
			
		}
	}
};
</script>

<style lang="scss" scoped>

.wrap {
	margin: 30rpx;
	.top {
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 0 30rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 1rpx #F3F3F3;
			.left {
				width: 180rpx;
				margin-left: 15rpx;
				color: #666666;
			}
			input {
				text-align: left;
			}
		}
		
		
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
				
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 100%;
		line-height: 100rpx;
		margin: 30rpx auto;
		bottom: 30rpx;
		left: 80rpx;
		background-color: #F8321D;
		border-radius: $base-radius;
		font-size: 30rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
	}
}
</style>
